<template>
  <div>
    <el-form :model="searchList" ref="searchList" size="normal">
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">
          <el-form-item label="">
            <el-input v-model="searchList.device_name" placeholder="软、硬件名称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="0">
          <el-form-item label="">
            <el-cascader :options="d_serveAll" v-model="searchList.type" placeholder="类型" clearable class="wid">
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-button type="primary" size="medium" @click="search" :loading="loading">查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableData.results" border stripe :height="offsetHeight" v-loading="loading">
      <el-table-column type="index" label="序号" width="60" align="center">
      </el-table-column>
      <el-table-column prop="device_name" label="名称" align="center">
      </el-table-column>
      <el-table-column label="类别" width="150" align="center">
        <template slot-scope="{row}">
          {{row.device_type ? row.device_type :row.service_type | f_ITtypeRename}}
        </template>
      </el-table-column>
      <el-table-column prop="purchase_price" label="总购置价格" width="120" align="center">
      </el-table-column>
      <el-table-column prop="service_pre_amount" label="运维金额" width="120" align="center">
      </el-table-column>
      <el-table-column prop="third_check_amount" label="审核金额" width="100" align="center">
      </el-table-column>
      <el-table-column prop="buy_type" label="采购方式" width="120" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.buy_type == 1">单一来源</span>
          <span v-if="scope.row.buy_type == 2">公开招标</span>
        </template>
      </el-table-column>
      <el-table-column prop="device_num" label="数量" width="120" align="center">
      </el-table-column>
      <el-table-column prop="center_plan_status" label="是否由中心统筹" width="120" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.center_plan_status == 1">是</span>
          <span v-if="scope.row.center_plan_status == 0">否</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="{row}">
          <el-button-group>
            <el-button type="primary" size="mini" @click="deviceInfo(row.id)" v-if="row.device_name">查看信息</el-button>
            <el-button type="primary" size="mini" @click="serveInfo(row.id)" v-else>查看信息</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination @size-change="pageSizeChange" @current-change="pageNoChange" :page-sizes="[10, 50, 100, 200]"
        :page-size="10" background layout="total, sizes, prev, pager, next" :total="tableData.totalRecord">
      </el-pagination>
    </div>
    <!-- 软硬件信息 -->
    <el-drawer title="软、硬件信息" :visible.sync="deviceShow" size="70%" center :destroy-on-close="true"
      :wrapperClosable="false">
      <device-item :device-params="deviceParams" @cancel="cancel" @init="init"></device-item>
    </el-drawer>
    <!-- 购买服务信息 -->
    <el-drawer title="购买服务信息" :visible.sync="serveShow" size="70%" center :destroy-on-close="true"
      :wrapperClosable="false">
      <serve-item :serve-params="serveParams" @cancel="cancel" @init="init"></serve-item>
    </el-drawer>
  </div>
</template>
<script>
import { f_ITtypeRename } from '@/utils/filters'
import { d_serveAll } from '@/utils/dicts'
import DeviceItem from '@/components/ItUsual/Device'
import ServeItem from '@/components/ItUsual/Serve'
export default {
  name: 'PastDeclaredVerifyIt',
  components: {
    DeviceItem, ServeItem
  },
  props: {
    cid: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data () {
    return {
      loading: false,
      saveLoading: false,
      searchList: {},
      tableData: [],
      offsetHeight: document.documentElement.clientHeight - 280,
      pageNo: '1',
      pageSize: '10',
      d_serveAll: d_serveAll,
      deviceShow: false,
      deviceParams: {},
      serveShow: false,
      serveParams: {}
    }
  },
  created () {

  },
  mounted () {
  },
  methods: {
    async init () {
      // 类型判断
      if (this.searchList.type && this.searchList.type.length > 0) {
        this.searchList.device_type = JSON.stringify(this.searchList.type)
      } else {
        delete this.searchList.device_type
      }
      this.loading = true
      const res1 = await this.$http('inputItPage', {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        del_flag: '0',
        contract_id: this.cid,
        ...this.searchList
      })
      this.tableData = res1
      this.loading = false
    },
    search () {
      this.pageNo = '1'
      this.pageSize = '10'
      this.init()
    },
    deviceInfo (id) {
      this.deviceShow = true
      this.deviceParams = {
        deviceId: id,
      }
    },
    serveInfo (id) {
      this.serveShow = true
      this.serveParams = {
        serveId: id,
      }
    },
    cancel () {
      this.deviceShow = false
      this.deviceParams = {}
      this.serveShow = false
      this.serveParams = {}
    },
    pageNoChange (pageNo) {
      this.pageNo = pageNo
      this.init()
    },
    pageSizeChange (pageSize) {
      this.pageSize = pageSize
      this.init()
    },
  },
  computed: {

  },
  filters: {
    f_ITtypeRename: f_ITtypeRename
  }
}
</script>
<style lang='scss' scoped>
</style>
